<template>
  <div>
    <ul
      v-infinite-scroll="loadMoreGood"
      infinite-scroll-delay="500"
      class="ul_box"
    >
      <li v-for="good in goodList" :key="good.id">
        <!-- 商品信息 -->
        <el-row class="good_item">
          <!-- 左边 -->
          <el-col :span="8" :offset="1" class="good_left">
            <el-image
              :src="good.goodImage[0]"
              fit="center"
              :preview-src-list="good.goodImage"
            ></el-image>
          </el-col>

          <!-- 右边 -->
          <el-col :span="13" :offset="1" class="good_right">
            <!-- 标题、价格 -->
            <el-row class="flex_center good_right_one">
              <el-col :span="12">
                <el-button
                  type="text"
                  class="good_name"
                  @click="showGoodDetail(good)"
                  >{{ good.goodName }}</el-button
                >
              </el-col>
              <el-col :span="12" class="good_price">
                {{ good.goodSellPrice }}
              </el-col>
            </el-row>
            <!-- 商品标签 -->
            <el-row class="good_right_two">
              <el-col>
                <el-button
                  v-for="(label, index) in good.goodLabel"
                  :key="index"
                  size="mini"
                  disabled
                  round
                  class="good_lable"
                  >{{ label }}</el-button
                >
              </el-col>
            </el-row>
            <!-- 简介 -->
            <el-row class="good_right_three">
              <el-col class="good_describe">
                {{ good.goodDescription }}
              </el-col>
            </el-row>
            <!-- 发布时间和卖家信息 -->
            <el-row class="flex_center good_right_four">
              <el-col :span="12"> 发布时间：{{ good.goodCreateTime }} </el-col>
              <el-col :span="12">
                <el-row class="flex_center">
                  <el-col :span="6" :offset="12">
                    <el-avatar :size="50" :src="good.uploaderAvatar">
                      <img src="@/assets/defaultAvatar.png" alt="" />
                    </el-avatar>
                  </el-col>
                  <el-col :span="6" class="single_line">
                    {{ good.uploaderName }}
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <CustomLine :margin="'9px 0px'" :border="'1px dashed #e8eaec'" />
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
import dayjs from "dayjs";
import axios from "@/request";

export default {
  name: "GoodList",
  data() {
    return {
      current: 1,
      pageSize: 5,
      goodList: [],
    };
  },
  mounted() {
    // 自定义事件--重新加载
    this.$bus.$on("reloadGoodList", () => {
      this.current = 1;
      this.goodList = [];
      this.loadMoreGood();
    });
    // 自定义事件--模糊搜索
    this.$bus.$on("fillGoodList", (goodList) => {
      this.goodList = this.dataFormator(goodList);
    });
  },
  // 及时解绑自定义事件
  beforeDestroy() {
    this.$bus.$off("reloadGoodList");
    this.$bus.$off("fillGoodList");
  },
  methods: {
    dataFormator(goodList) {
      for (const good of goodList) {
        // 原价
        if (good.goodOriginPrice == "0" ? false : true) {
          good.goodOriginPrice =
            good.goodOriginPrice.slice(0, good.goodOriginPrice.length - 2) +
            "." +
            good.goodOriginPrice.slice(good.goodOriginPrice.length - 2);
        }
        // 售价
        if (good.goodSellPrice == "0" ? false : true) {
          good.goodSellPrice =
            good.goodSellPrice.slice(0, good.goodSellPrice.length - 2) +
            "." +
            good.goodSellPrice.slice(good.goodSellPrice.length - 2);
        }
        // 标签
        good.goodLabel = good.goodLabel.split(" ");
        // 发布时间
        good.goodCreateTime = dayjs(good.goodCreateTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      return goodList;
    },
    async loadMoreGood() {
      return new Promise((resolve, reject) => {
        axios
          .get("/good/getGoodList", {
            params: {
              current: this.current,
              size: this.pageSize,
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              let temp = this.dataFormator(res.data.data);
              if (temp.length == 0) {
                return this.$message.info("没有更多的商品了哦");
              }
              this.goodList.push(...temp);
              this.current++;
            }
            resolve();
          })
          .catch((e) => {});
      });
    },
    showGoodDetail(good) {
      this.$store.dispatch("goodModule/updateGood", good);
      this.$router.push({ name: "goodDetail" });
    },
  },
};
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  height: 320px;
}

/* 滚动条相关配置 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f5cece;
}
::-webkit-scrollbar-thumb {
  background: red;
}

.ul_box {
  height: 100%;
  overflow: auto;
}

.good_item {
  height: 300px;
}

.good_left {
  height: 100%;
  overflow: hidden;
}

.good_right {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.good_right_one {
  height: 20%;
}
.good_right_two {
  height: 10%;
}
.good_right_three {
  height: 50%;
  display: flex;
  align-items: center;
}
.good_right_four {
  height: 20%;
}

.good_name {
  text-align: left;
  font-size: 18px;
  color: black;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.good_price::before {
  content: "￥";
  font-size: 18px;
  font-weight: 1000;
  color: rgb(255, 145, 0);
}

.good_price {
  text-align: right;
  font-size: 22px;
  font-weight: 1000;
  color: rgb(255, 145, 0);
}

.good_lable {
  background-color: #f5f5ff;
}

.good_describe {
  color: grey;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}

.good_describe:hover {
  overflow: auto;
  scrollbar-width: 6px;
}

.flex_center {
  display: -webkit-flex;
  align-items: center;
}

.single_line {
  word-wrap: nowarp;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>